<template>
  <div class="info-wrap">
    <div class="flex-center">
      <Title title="签约信息" style="margin:6px 0 8px 0" font-size="16px"/>
      <editBtn v-if="hasRouteAuth('medium:dataEdit:signInfo') && detailInfo.isEditAuth && isNewVersion" @handleClick="editModule"/>
    </div>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="field in computedFields" :span="field.span || 8" :key="field.keyword" :class="{'no-border': noBorderKeys.includes(field.keyword)}">
          <el-form-item :label="`${field.label}：`" style="margin-bottom: 0px;">
            <template v-if="field.type === 'number'">
              <ToolTip
                :content="getData(field) | numberTextFormat(2)"
                :tool-tip="getData(field) | moneyFilter" />
            </template>
            <template v-else-if="field.type === 'rangeTime'">
              <span v-if="detailInfo[field.parentKey] && detailInfo[field.parentKey][field.start]">
                {{ format(detailInfo[field.parentKey][field.start], field.format) }}-{{ format(detailInfo[field.parentKey][field.end], field.format) }}
                <span v-if="field.getMonth" class="month">
                  <span>{{ getMonth(detailInfo[field.parentKey][field.start],detailInfo[field.parentKey][field.end])+'个月' }}</span>
                </span>
              </span>
              <span v-else>--</span>
            </template>
            <template v-else-if="field.type === 'userArray'">
              <CheckUserInfo
                v-if="detailInfo[field.parentKey][field.keyword]"
                :user-list="detailInfo[field.parentKey][field.keyword]"
                :multiple="detailInfo[field.parentKey][field.keyword].length > 1"
                :user-id="detailInfo[field.parentKey][field.keyword].length === 1?detailInfo[field.parentKey][field.keyword][0][field.keyName || 'id']:null"
                :label="detailInfo[field.parentKey][field.keyword].length === 1?detailInfo[field.parentKey][field.keyword][0][field.labelName || 'userName']:null"
                :label-name="field.labelName || 'userName'"
                :key-name="field.keyName || 'id'"
              />
              <div v-else>--</div>
            </template>
            <template v-else-if="field.type === 'user'">
              <CheckUserInfo :label="detailInfo[field.parentKey][field.keyword]" :user-id="detailInfo[field.parentKey][field.keyName]" />
            </template>
            <ToolTip v-else-if="field.type === 'percent'" :content="getData(field)" unit="%"/>
            <ToolTip v-else :content="getData(field)" />
          </el-form-item>
        </el-col>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(detailInfo.handoverKey.dynamicKey)" :span="8" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import mixins from './mixins';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import { cooperationStatusFilter } from '@/utils/accountCommonData';
import { format } from '@/filters/date';
import { getMonth } from '@/views/resource/create/resourceData';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter, cooperationStatusFilter },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      noBorderKeys: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    computedFields() {
      const fields = [
        { label: '签单签约经纪', keyword: 'contractBroker', parentKey: 'additionalKey', keyName: 'contractBrokerId', type: 'user' },
        { label: '现维护经纪人', keyword: 'followContractBroker', parentKey: 'additionalKey', type: 'userArray' },
        { label: '签约所属部门', keyword: 'signGroupsName', parentKey: 'additionalKey' },
        { label: '达人运营', keyword: 'operator', parentKey: 'additionalKey', type: 'userArray' },
        { label: '执行经纪', keyword: 'executeBroker', parentKey: 'additionalKey', type: 'userArray' },
        { label: '合作方式', keyword: 'cooperationOption', parentKey: 'additionalKey', filterFn: cooperationStatusFilter },
        { label: '试合作期', keyword: 'cooperationTime', start: 'cooperationStart', end: 'cooperationEnd', parentKey: 'additionalKey', type: 'rangeTime', format: 'YYYY/MM', getMonth: true },
        { label: '工作微信', keyword: 'workWxCode', parentKey: 'additionalKey' },
        { label: '返点比例', keyword: 'pointHighestRatio', parentKey: 'additionalKey', type: 'percent', hidden: !(this.isJournalPlatform && this.detailInfo.platformTypeName !== '微博') }
      ];
      return fields.filter(i => !i.hidden);
    },
    signDetailStatus() {
      return this.detailInfo.moreAccountInfo.signDetailStatus;
    }
  },
  methods: {
    getMonth,
    format,
    getData(field) {
      const value = this.detailInfo[field.parentKey] ? this.detailInfo[field.parentKey][field.keyword] : '';
      return field.filterFn ? field.filterFn(value) : value;
    }
  }
};
</script>
<style lang="scss" scoped>
.legal-code-container {
  display: flex;
  align-items: center;
  width: 240px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  &.legal-code-container-mobile {
    width: auto;
  }
  .icon {
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    margin-right: 8px;
    display: none;
  }
  &:hover {
    .icon {
      display:block;
    }
  }
}
.month {
  margin-left: 8px;
}
</style>
